<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 如果做小程序开发  整个屏幕的大小都是 750rpx -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 1200px;
            height: 30px;
            margin: 0 auto;
            background-color: pink;
            font-size: 10cm;
        }
    </style>
</head>

<body>
    <!-- 1920是物理分辨率 -->
    <div>1111</div>

    <!-- 电脑放大了1.25倍  所以逻辑像素应该是1920 / 1.25 -->

    <!-- 手机分辨率  iphone678 物理分辨率是750  逻辑分辨率是375  可以理解为默认的缩放比例是200% -->

    <!-- 苹果电脑的分辨率 看起来都比较清晰 
    物理像素比  1:1.25
    iphone678  1:2
    
    手机屏幕5.5寸大小已经是固定的  在5.5寸的屏幕里面 我希望放更多的像素点
    本来只能放375个像素点  但是我进行放大之后  放700个像素点
    就是为了显示的更加清晰
    -->

</body>

</html>